<template>
 <div id="container">
 </div>
</template>

<script>
import * as echarts from "echarts";

export default {

  name: 'ActionHistogram',
  mounted(){
    this.initCharts()
  },
  methods: {

    initCharts() {
      const app1 = {};
      const chartDom = document.getElementById('center-bottom');
      const myChart5 = echarts.init(chartDom);
      let option3;

      $.when(
          $.getJSON(this.$BaseUrl+'/asiangameCountInfo/getall')
      ).done(function(datas){
        // console.log(datas)
        const categories = (function () {
          let res = [];
          let len =0;
          while (len<5) {
            res.unshift(datas[len].year+'年');
            len++
          }
          return res;
        })();
        const categories2 = (function () {
          let res = [];
          let len = 5;
          while (len--) {
            res.push('第'+(5-len)+'届');
          }
          return res;
        })();
        const data1 = (function () {
          let res = [];
          let len =0;
          while (len<5) {
            res.push(datas[len].countCountry);
            len++
          }
          return res;
        })();
        const data2 = (function () {
          let res = [];
          let len =0;
          while (len<5) {
            res.push(datas[len].countPlayer);
            len++;
          }
          return res;
        })();
        // console.log(data1)
        // console.log(data2)
        option3 = {
          grid:{
            bottom:20
          },
          title: {
            text: '亚运会历届参赛数情况',
          },
          tooltip: {

            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                margin: 10,
                backgroundColor: '#283b56'
              }
            }
          },
          legend: {},
          toolbox: {
            show: true,
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },

          dataZoom: {
            show: false,
            start: 0,
            end: 100
          },

          xAxis: [
            {
              type: 'category',
              boundaryGap: true,
              data: categories
            },
            {
              type: 'category',
              boundaryGap: true,
              data:categories2
            }
          ],
          yAxis: [
            {
              type: 'value',
              scale: true,
              name: '国家数',
              max: 60,
              min: 0,
              boundaryGap: [0.5, 0.5]
            },
            {
              type: 'value',
              scale: true,
              name: '人数',
              max: 18000,
              min: 0,
              boundaryGap: [0.5,0.5]
            }
          ],
          series: [
            {
              name: '历年参赛国家数',
              type: 'bar',
              xAxisIndex: 0,
              yAxisIndex: 0,
              color:'red',
              data: data1
            },
            {
              name: '历届参赛人数',
              type: 'line',
              xAxisIndex: 1,
              yAxisIndex: 1,
              data: data2
            }
          ]
        };
        myChart5.setOption(option3);
        app1.count=4;
        app1.count1=5;
        setInterval(function () {
          if(app1.count>16){
            app1.count=0

          }
          if(app1.count1>17)
          {
            app1.count1=0
          }

          // console.log(app1.count)
          app1.count++
          app1.count1++
          let axisData=datas[app1.count].year;
          data1.shift();
          data1.push(datas[app1.count].countCountry);
          data2.shift();
          data2.push(datas[app1.count].countPlayer);
          categories.shift();
          categories.push(axisData+'年');
          categories2.shift();
          categories2.push('第'+(app1.count1)+'届');
          myChart5.setOption({
            xAxis: [
              {
                data:categories
              },
              {
                data:categories2
              }
            ],
            series: [
              {
                data: data1
              },
              {
                data: data2
              }
            ]
          });
        },1500);
      });
      if (option3 && typeof option3 === 'object') {
        myChart5.setOption(option3);
      }
      window.addEventListener("resize",()=>{
        myChart5.resize();
      });


    }
  }
}
</script>

<style scoped>
#container{
  width: 100%;
  height: 100%;
}
</style>
